<template>
  <a-form :form="form">
    <a-form-item
      :label="item.name + ':'"
      :required="item.required"
      v-for="(item, index) in formData"
      :key="index"
    >
      <a-select
        :showSearch="showSearch"
        :mode="item.name === '会签' ? 'multiple' : ''"
        placeholder="请选择处理人"
        style="width: 672px;"
        v-model="item.checkSelsectData"
        @change="closeOption"
        :key="new Date().getTime() + '1'"
        filter-option-prop="children"
        :filter-option="filterOption"
        :allowClear="true"
      >
        <a-select-option
          v-for="(item, index) in item.selsectData"
          :key="index"
          :value="item.id"
          >{{ item.fullname }}
        </a-select-option>
      </a-select>
    </a-form-item>
  </a-form>
</template>
<script>
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      initData: [],
      other: [],
      proofreading: [],
      verify: [],
      countersign: [],
      approve: [],
      proofreadingDefault: [],
      verifyDefault: [],
      countersignDefault: [],
      approveDefault: [],
      form: this.$form.createForm(this),
      isOpen: false, //是否展开下拉
      showSearch:true
    };
  },
  computed: {
    ...mapGetters({
      fileSingleData: "fileSingle",
    }),
  },
  props: {
    stateType: {
      type: String,
      default: "",
    },
    Oid: {
      type: String,
      default: "",
    },
    formData: {
      type: Array,
      default: () => [],
    },
  },
  watch:{
    formData(v1){
      this.formData = v1;
    }
  },
  methods: {
    //选择之后，关闭下拉框
    closeOption() {
      this.isOpen = true;
    },
    //模糊搜索方法
    filterOption(input,option){
   //   console.log(input,option);
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      );
    },
    handleChange() {
      let obj = {
        请选择校对人员:
          this.formData[0].checkSelsectData.length < 1 &&
          this.formData[0].required,
        请选择审核人员:
          this.formData[1].checkSelsectData.length < 1 &&
          this.formData[1].required,
        请选择会签人员:
          this.formData[2].checkSelsectData.length < 1 &&
          this.formData[2].required,
        请批准校对人员:
          this.formData[3].checkSelsectData.length < 1 &&
          this.formData[3].required,
      };
      for (let key in obj) {
        if (obj[key]) return this.$message.error(key);
      }
  
      let arr = [];
      this.formData.forEach((item) => {
        //人员未选择传空
        // if (item.checkSelsectData.length > 0) {
        if (item.name === "会签") {
          arr.push({ oid: item.oid, users: this.getId(item.checkSelsectData,item.selsectData) });
        } else {
         
          if (item.checkSelsectData.length > 0) {
            arr.push({
              oid: item.oid,
              users: this.getId([item.checkSelsectData],item.selsectData),
            });
          } else {
            arr.push({ oid: item.oid, users: [] });
          }
        }
        // }
      });
      this.$emit("fields", arr);
    },
    //流程处理选择下拉 显示的不管是名子fullname  还是id,一律返回id
    getId(checkSelsectData,selsectData) {
      let arr = [];
      checkSelsectData.forEach((e)=>{
        selsectData.forEach((item)=>{
          if(e==item.fullname || e==item.id){
            arr.push({ id: item.id });
          }
        })
      })
      return arr;
    },
  },
};
</script>
<style lang="less" scoped>
.ant-form {
  .ant-form-item {
    margin-bottom: 12px;
    display: flex;
    /deep/ .ant-form-item-label {
      padding-right: 30px;
      text-align: right;
      width: 80px;
      font-size: 14px;
      font-weight: 400;
      box-sizing: border-box;
      & > label {
        color: #666666;
      }
    }
  }
}
</style>